import Taro from '@tarojs/taro'
import {View, Text, Swiper, SwiperItem} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import img1 from '../../assets/bg.jpg'
import ProjectItem from '../../components/project_item'
import FundingItem from '../../components/funding_item'
import ServiceItem from '../../components/service_item'
import SearchBar from '../../components/search_bar'
import MenuBar from '../../components/menu_bar'
import Gap from '../../components/gap'
import {AtNoticebar, AtTabs, AtTabsPane, AtActivityIndicator} from 'taro-ui'
import withShare from '../../components/share/withShare';

import './index.less'

@connect(state => ({
  loadingRecom: state.loading.effects['project/getRecom'],
  loadingFunding: state.loading.effects['funding/getAll'],
  loadingService: state.loading.effects['service/getAll'],
  project: state.project,
  funding: state.funding,
  service: state.service,
}))
@withShare()
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '沧石并购'
  }

  constructor() {
    super(...arguments)

    this.state = {
      imgUrls: [
        img1,
        img1,
        img1,
      ],
      current: 0,
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    this.props.dispatch({
      type: 'project/getRecom',
      payload: {
        num: 10,
      },
    });
  }

  componentDidHide() {
  }

  handleClick = value => {
    this.setState({
      current: value
    })

    if (value === 1) {
      this.props.dispatch({
        type: 'funding/getAll',
      });
    } else if (value === 2) {
      this.props.dispatch({
        type: 'service/getAll',
      });
    }
  };

  render() {
    const {loadingRecom, loadingFunding, loadingService, project, funding, service} = this.props;
    const {imgUrls} = this.state;
    const menuList = [{
      id: 1,
      icon: 'iconfont icon-tubiao',
      bgColor: '#3cf',
      name: '股权',
      url: `/pages/project_list/index?cid=1&cname=股权`,
    }, {
      id: 2,
      icon: 'iconfont icon-qiandai',
      bgColor: '#9c3',
      name: '债权',
      url: `/pages/project_list/index?cid=2&cname=债权`,
    }, {
      id: 3,
      icon: 'iconfont icon-shouyeleimufangchan',
      bgColor: '#f93',
      name: '土地/房产',
      url: `/pages/project_list/index?cid=3&cname=土地/房产`,
    }, {
      id: 4,
      icon: 'iconfont icon-qita',
      bgColor: '#c6c',
      name: '其它',
      url: `/pages/project_list/index?cid=4&cname=其它`,
    }];
    const tabList = [{
      title: '项目'
    }, {
      title: '资方'
    }, {
      title: '服务'
    }];

    return (
      <View className='container'>
        <Swiper
          className='slide'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay
        >
          {
            imgUrls.map((item, idx) => (
              <SwiperItem key={idx}>
                <Image className='img' mode='widthFix' src={item}/>
              </SwiperItem>
            ))
          }
        </Swiper>
        <AtNoticebar icon='volume-plus' marquee>
          这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
        </AtNoticebar>
        <SearchBar/>
        <MenuBar menuList={menuList}/>
        <Gap/>
        <View className='panel'>
          <View className='body'>
            <AtTabs
              current={this.state.current}
              tabList={tabList}
              onClick={this.handleClick.bind(this)}
              swipeable={false}
            >
              <AtTabsPane current={this.state.current} index={0} >
                {
                  project.list.length > 0
                    ? project.list.map(item => <ProjectItem key={item.id} item={item}/>)
                    : loadingRecom ? <AtActivityIndicator mode='center'/> : <View>没有数据</View>
                }
              </AtTabsPane>
              <AtTabsPane current={this.state.current} index={1}>
                {
                  funding.list.length > 0
                    ? funding.list.map(item => <FundingItem key={item.id} item={item}/>)
                    : loadingFunding ? <AtActivityIndicator mode='center'/> : <View>没有数据</View>
                }
              </AtTabsPane>
              <AtTabsPane current={this.state.current} index={2}>
                {
                  service.list.length > 0
                    ? service.list.map(item => <ServiceItem key={item.id} item={item}/>)
                    : loadingService ? <AtActivityIndicator mode='center'/> : <View>没有数据</View>
                }
              </AtTabsPane>
            </AtTabs>
          </View>
        </View>
      </View>
    )
  }
}